<template>
  <div>
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <el-row>
      <el-col>
        <el-button @click="toAddGroup" type="primary">添 加</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column
          prop="groupName"
          label="分组名称"
          width="180">
      </el-table-column>
      <el-table-column width="80" label="适用范围">
        <template slot-scope="scope">
          <span>{{ scope.row.groupIndx | formatApplyTo }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80" label="婚姻条件">
        <template slot-scope="scope">
          <span>{{ scope.row.groupMarriage|formatMarriage }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80" label="年龄条件">
        <template slot-scope="scope">
          <span>{{ scope.row.groupAge|formatAge }} </span>
          <span v-if="scope.row.groupAge>0 ">{{ scope.row.ageRange }}</span>
        </template>
      </el-table-column>
      <el-table-column
          width="80"
          prop="discountPrice"
          label="总价">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button @click="editGroup(scope.row)" size="small" type="primary">修改</el-button>
          <el-button size="small" type="danger" @click="deletegroupinfo(scope.row)">删除</el-button>
          <el-button size="small" type="info" @click="valuetitle(scope.row)">体检项目</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改分组" :visible.sync="dialogroupedit" width="600px" append-to-body>
      <el-form ref="editForm" :model="editForm">
        <el-form-item label="分组名称" label-width="80px">
          <el-input v-model="editForm.groupName"></el-input>
        </el-form-item>
        <el-form-item label="适用范围" label-width="80px">
          <el-select v-model="editForm.groupIndx" style="width: 100%">
            <el-option v-for="(item,index) in optionsSex" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="婚姻分组" label-width="80px">
          <el-select v-model="editForm.groupMarriage" style="width: 100%">
            <el-option v-for="(item,index) in optionsMarriage" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄分组" label-width="80px">
          <el-select v-model="editForm.groupAge" @change="getage" style="width: 100%">
            <el-option v-for="(item,index) in groupAge" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄限制" v-show="ageRange" label-width="80px">
          <el-input v-model="editForm.ageRange"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editgroupinfo">确 定</el-button>
        <el-button @click="dialogroupedit = false">取 消</el-button>
      </div>
    </el-dialog>
    <groupItems :show="itemsDialog" :group="groupCur" actionType="submit" @change="itemsChange"/>
  </div>
</template>

<script>
import crumbs from "@src/views/Crumbs";
import groupItems from "../common/groupItems.vue";
import {optionsSex, optionsMarriage, groupAge, contractStatus} from "@src/common/utils/constant";


export default {
  components: {
    crumbs,
    groupItems,
  },
  name: "contractGroup",
  data() {
    return {
      BreadCrumb: [
        {path: "", name: "基础管理"},
        {path: "/basic/contractGroup", name: "团检分组"},
      ],
      optionsSex: optionsSex,
      optionsMarriage: optionsMarriage,
      groupAge: groupAge,
      groupId: null,
      editForm: {},
      ageRange: false,
      dialogroupedit: false,
      itemsDialog: false,
      groupCur: {
        selectedList:[]
      },
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNo: 1,
    }
  },
  filters: {
    formatContractStatus: function (val) {
      const dict = {}
      contractStatus.forEach(v => {
        dict[v.value] = v.label
      })
      return dict[val]
    },
    formatDate: function (time) {
      if (time != null && time !== "") {
        var date = new Date(time);
        return formatTimeToStr(date, "yyyy-MM-dd hh:mm");
      } else {
        return "";
      }
    },
    formatApplyTo: function (val) {
      const dict = {}
      optionsSex.forEach(v => {
        dict[v.value] = v.label
      })
      return dict[val]
    },
    formatMarriage: function (val) {
      const dict = {}
      optionsMarriage.forEach(v => {
        dict[v.value] = v.label
      })
      return dict[val]
    },
    formatAge: function (val) {
      const dict = {}
      groupAge.forEach(v => {
        dict[v.value] = v.label
      })
      return dict[val]
    }
  },
  methods: {
    queryGroupList() {
      this.$axios.selectGroupTemplateList({
        ...this.editForm
      }).then(res => {
        if (res.code === '00000') {
          this.tableData = res.data
          this.total = res.data.length
        }
      })
    },
    toAddGroup() {
      this.dialogroupedit = true
      this.editForm = {}
      this.ageRange=false
    },

    valuetitle(row) {
      this.itemsDialog = true;
      this.groupCur = row;
    },

    itemsChange(e) {
      const {show} = e
      this.itemsDialog = show
    },
    // 根据分组查询体检项目
    examItemList(params) {
      this.$axios.examItemList(
          params
      ).then(res => {
        if (res.code == '00000') {
          this.staffList = res.data.records
        }
      })
    },

    // 编辑合同分组
    editGroup(row) {
      this.groupId=row.id
      this.dialogroupedit = true
      this.editForm = Object.assign({}, row);  //表格给form传值
      this.ageRange = row.ageRange>0
      // console.log(row);
      // console.log("前cid",this.editForm)
    },
    // 编辑合同分组
    editgroupinfo() {
      if (this.groupId === null) {
        this.$axios.insertGroupTemplateList(this.editForm).then(res => {
          if (res.code === '00000') {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.queryGroupList();
          }
        })
      } else {
        this.$axios.updateGroupTemplateList({
          ...this.editForm
        }).then(res => {
          if (res.code === '00000') {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.queryGroupList();
          }
        })
      }

      this.dialogroupedit = false;
    },
    // 删除合同分组
    deletegroupinfo(row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.deleteGroupTemplateList({
          id: row.id
        }).then(res => {
          console.log(res)
          if (res.code === '00000') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.queryGroupList(row.contractId);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 年龄限制
    getage() {
      if (this.editForm.groupAge == 0) {
        this.editForm.ageRange = null
        this.ageRange = false
      } else {
        this.ageRange = true
      }
    },

  },
  created() {
    this.queryGroupList()
  }
}
</script>

<style scoped>

</style>
